<template>
  <div class="directional-pad">
    <div class="keys-container">
      <span @mousedown="md('up')" @mouseup="mu('up')"  :class="{'key': true}" class="up">↑</span>
      <span @mousedown="md('down')" @mouseup="mu('down')"  :class="{'key': true}" class="down">↑</span>
      <span @mousedown="md('lift')" @mouseup="mu('lift')" :class="{'key': true}" class="left">↑</span>
      <span @mousedown="md('right')" @mouseup="mu('right')"  :class="{'key': true}" class="right">↑</span>
    </div>
    <div class="center-button">
      <button @click="pause">暂停</button>
    </div>
  </div>
</template>

<script>
import {controllerDevice, stopPlayer} from "@/api/controller";

export default {
  props:['devicesn'],
  data() {
    return {
      keys: {
        up: false,
        down: false,
        left: false,
        right: false,
      },
    };
  },
  methods: {
    md(fangXiang){
      controllerDevice(fangXiang,this.devicesn).then(res=>{
        console.log(res)
       })
    },
    mu(){
      controllerDevice("stop",this.devicesn).then(res=>{
        console.log(res)
      })
    },
    pause() {
      stopPlayer(this.devicesn).then(res=>{
        console.log(res)
      })
    },
  },
};
</script>

<style scoped>
.directional-pad {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
}

.keys-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.key {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
  border-radius: 50%;
  overflow: hidden;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 初始clip-path，实际需要根据方向调整 */
  transition: background-color 0.3s;
}

.up {
  transform: rotate(0deg) translateY(-25%);
  margin-bottom: 30px ;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.down {
  transform: rotate(180deg) translateY(-25%);
  margin-top: 30px ;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.left {
  margin-right: 30px;
  transform: rotate(-90deg) translateY(-25%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.right {
  margin-left: 30px;
  transform: rotate(90deg) translateY(-25%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}


/* 其余方向的clip-path需要根据实际情况调整，这里只给出两个方向的示例 */

.up:hover{
  background-color:#cccccc;
}
.down:hover{
  background-color: #cccccc;
}
.left:hover{
  background-color: #cccccc;
}
.right:hover{
  background-color: #cccccc;
}

.center-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #232e45;
  //color:  #cccccc;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  z-index: 1; /* 确保暂停按钮在其他元素之上 */
  border: 1px burlywood solid ;
}
</style>